{$layout}
{$template "/code_editor"}

<first-menu class="second-menu">
    <menu-item href="/servers/scripts">脚本库</menu-item>
    <span class="item disabled" style="padding: 0">&raquo;</span>
    <menu-item :href="'.script?scriptId=' + script.id">"{{script.filename}}"详情</menu-item>
    <menu-item :href="'.update?scriptId=' + script.id" class="active">修改</menu-item>
</first-menu>

<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="scriptId" :value="script.id"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">脚本文件名 *</td>
            <td>
                <input type="text" name="filename" maxlength="50" :ref="isEditingCode ? '' : 'focus'" placeholder="xxx.js" v-model="script.filename" spellcheck="false"/>
            </td>
        </tr>
        <tr>
            <td>脚本说明 *</td>
            <td>
                <input type="text" name="name" maxlength="50" placeholder="脚本用途" v-model="script.name"/>
            </td>
        </tr>
        <tr>
            <td>脚本代码</td>
            <td>
                <source-code-box type="application/javascript" :read-only="false" name="code" height="200" focus="true">{{script.code}}</source-code-box>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>启用当前脚本</td>
                <td>
                    <checkbox name="isOn" v-model="script.isOn"></checkbox>
                </td>
            </tr>
        </tbody>
    </table>
    <submit-btn></submit-btn>
</form>